import React, { useState } from "react";
import UploadFile from './UploadPlay'
import IpnutTextarea from './InputTextarea'
import SeqList from './SequenceList'
import Algorithm from './Algorithm'
import {
  Divider,
  // Button, 
  message
} from 'antd'

const flexStyle = {
  display: 'flex',
  alignItems: 'flex-end',
  justifyContent: 'flex-end',
  paddingBottom: '50px',
}
const titleStyle = {
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'flex-start',
  height: '50px',
  padding: 0,
  marginTop: '10px',
  marginBottom: 0,
}


const seqListArr = [
  // {
  //   desc: '私人的',
  //   title: 'AntDesign.gb',
  //   id: null,
  //   template: true
  // } 
];

// 对比组件
function Compared (props) {
  // 需要对比的序列集合
  const [seqFileArr, setSeqFileArr] = useState(seqListArr)
  const [handlerGetSeqFile, setHhandlerGetSeqFil] = useState(true)
  const setSeqItem = (item) => {
    setSeqFileArr([item, ...seqFileArr])
  }
  // 在调用之前先挂载方法
  window.AreactMethods.setSeqFileArr = (data) => {
    setSeqFileArr([...data])
  }

  // seqAlgorithm
  const [algorithmData, setAlgorithmData] = useState([
    { code: '0', name: 'Multiple Sequence Aliagnment' }
  ])
  const [seqAlgorithm, setSeqAlgorithm] = useState('0')
  const handelPost = (event) => {
    event.persist(); // 只能通过按钮点击触发

    // 序列对比提交
    if (window.Avue) {
      // 接口成功后 在Tab.js中创建TabPlan展示比对结果
      if (seqFileArr?.length < 1) return window.toastr.warning('没有可进行比对的文件')
      window.Avue.v_seqAlignmentPost({ seqFileArr, seqAlgorithm })
      message.info('数据提交中...')
    } else {
      message.success('本地 handelPost')
      // 本地创建Tab
      let now = Date.now().toString()
      let key = 'tab' + now
      let tab = now.slice(now.length - 4, now.length) + '序列对比结果'
      // 新增一个Tab展示结果
      props.setTabs([...props.tabs, {
        tab,
        key,
        tabKey: key,
        closable: true, // 可以关闭
        component: 'Align'
      }])
      props.setActiveKey(key) // Tab选中
      props.setScrollTop(true) // 滚动条置顶
    }
  }

  React.useEffect(() => {
    // 初始就更新比对列表数据
    if (window.Avue?.v_seqListGet && handlerGetSeqFile) {
      setHhandlerGetSeqFil(false)
      window.Avue.v_seqListGet()
    } else {
      console.log('React-> not found window.Avue');
    }
    if (window.Avue?.listBytype) {
      setAlgorithmData(window.Avue.listBytype)
    }
  }, [handlerGetSeqFile])

  const colorStyle = {
    color: props.darkMode ? '#afb6bc' : '#444'
  }

  return (
    <div>
      <UploadFile darkMode={props.darkMode} sequenceData={props.sequenceData} />
      <p style={{ ...titleStyle, ...colorStyle }}>Or create a DNA sequence from scratch.</p>
      <IpnutTextarea setSeqItem={setSeqItem} darkMode={props.darkMode} componentType={props.sequenceData.type} />
      <Divider style={colorStyle} orientation="left" plain>Sequences</Divider>
      <SeqList seqFileArr={seqFileArr} darkMode={props.darkMode} />
      <Divider style={colorStyle} orientation="left" plain>Algorithms</Divider>
      <Algorithm
        darkMode={props.darkMode}
        algorithmData={algorithmData}
        seqAlgorithm={seqAlgorithm}
        setSeqAlgorithm={setSeqAlgorithm} />
      <div style={flexStyle}>
        <button
          disabled={seqFileArr?.length < 1 ? true : false}
          onClick={(e) => handelPost(e)}
          type="submit"
          className="bp3-button bp3-intent-primary">
          <span className="bp3-button-text">Create Alignment</span>
        </button>
      </div>
    </div>
  )
}
export default Compared